"use client";

import { useState } from "react";
import {
  Smartphone,
  Watch,
  Heart,
  Activity,
  Wifi,
  Plus,
  AlertCircle,
  Scale,
  Bed,
  ThermometerSun,
  Footprints,
  Timer,
  Lock,
  Settings,
  RefreshCw,
  Battery,
} from "lucide-react";
import { AuthGuard } from "@/components/auth/auth-guard";

export default function DevicesPage() {
  const [activeTab, setActiveTab] = useState<"connected" | "available">(
    "connected"
  );

  // 模拟已连接设备数据
  const connectedDevices = [
    {
      id: 1,
      name: "Mi Band 8 Pro",
      type: "smartwatch",
      icon: Watch,
      status: "connected",
      lastSync: "2024-01-20 15:30",
      battery: 85,
      metrics: ["心率", "步数", "睡眠", "血氧"],
    },
    {
      id: 2,
      name: "华为智能体脂秤",
      type: "scale",
      icon: Scale,
      status: "offline",
      lastSync: "2024-01-19 08:45",
      battery: 90,
      metrics: ["体重", "体脂率", "BMI", "骨骼肌"],
    },
  ];

  // 模拟可用设备数据
  const availableDevices = [
    {
      id: 3,
      name: "Apple Watch Series 9",
      type: "smartwatch",
      icon: Watch,
      features: ["心电图", "血压监测", "运动追踪"],
    },
    {
      id: 4,
      name: "Oura Ring Gen 3",
      type: "ring",
      icon: Timer,
      features: ["睡眠监测", "体温监测", "活动追踪"],
    },
    {
      id: 5,
      name: "小米智能血压计",
      type: "bloodpressure",
      icon: Heart,
      features: ["血压监测", "心率监测", "数据同步"],
    },
  ];

  return (
    <AuthGuard>
      <div className="container mx-auto py-8 px-4">
        {/* 页面标题 */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold flex items-center gap-2">
            <Smartphone className="w-8 h-8 text-primary" />
            设备管理
          </h1>
          <p className="text-muted-foreground mt-2">
            管理您的智能健康设备，实时同步健康数据
          </p>
        </div>

        {/* 设备统计卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <div className="bg-card rounded-lg p-6 shadow-lg">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">已连接设备</p>
                <p className="text-2xl font-bold">2</p>
              </div>
              <Wifi className="w-8 h-8 text-primary" />
            </div>
          </div>
          <div className="bg-card rounded-lg p-6 shadow-lg">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">今日同步次数</p>
                <p className="text-2xl font-bold">5</p>
              </div>
              <RefreshCw className="w-8 h-8 text-primary" />
            </div>
          </div>
          <div className="bg-card rounded-lg p-6 shadow-lg">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">数据指标</p>
                <p className="text-2xl font-bold">8</p>
              </div>
              <Activity className="w-8 h-8 text-primary" />
            </div>
          </div>
        </div>

        {/* 标签页切换 */}
        <div className="flex gap-4 mb-6 border-b">
          <button
            onClick={() => setActiveTab("connected")}
            className={`pb-2 px-1 ${
              activeTab === "connected"
                ? "border-b-2 border-primary text-primary font-medium"
                : "text-muted-foreground"
            }`}
          >
            已连接设备
          </button>
          <button
            onClick={() => setActiveTab("available")}
            className={`pb-2 px-1 ${
              activeTab === "available"
                ? "border-b-2 border-primary text-primary font-medium"
                : "text-muted-foreground"
            }`}
          >
            可用设备
          </button>
        </div>

        {/* 设备列表 */}
        {activeTab === "connected" ? (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {connectedDevices.map((device) => (
              <div key={device.id} className="bg-card rounded-lg p-6 shadow-lg">
                <div className="flex justify-between items-start mb-4">
                  <div className="flex items-center gap-3">
                    <device.icon className="w-8 h-8 text-primary" />
                    <div>
                      <h3 className="font-medium">{device.name}</h3>
                      <p className="text-sm text-muted-foreground">
                        上次同步: {device.lastSync}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span
                      className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
                        device.status === "connected"
                          ? "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300"
                          : "bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300"
                      }`}
                    >
                      {device.status === "connected" ? "已连接" : "离线"}
                    </span>
                    <button className="p-2 hover:bg-accent rounded-lg transition-colors">
                      <Settings className="w-4 h-4" />
                    </button>
                  </div>
                </div>
                <div className="space-y-3">
                  <div className="flex items-center gap-2 text-sm">
                    <Battery className="w-4 h-4" />
                    <span>电量: {device.battery}%</span>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {device.metrics.map((metric, index) => (
                      <span
                        key={index}
                        className="px-2 py-1 bg-primary/10 text-primary rounded-full text-sm"
                      >
                        {metric}
                      </span>
                    ))}
                  </div>
                </div>
                <div className="mt-4 pt-4 border-t flex justify-between items-center">
                  <button className="text-sm text-destructive hover:text-destructive/80 transition-colors">
                    解除绑定
                  </button>
                  <button className="text-sm text-primary hover:text-primary/80 transition-colors">
                    立即同步
                  </button>
                </div>
              </div>
            ))}
            <div className="bg-card rounded-lg p-6 shadow-lg border-2 border-dashed border-muted-foreground/20 flex flex-col items-center justify-center gap-2 hover:border-primary/50 transition-colors cursor-pointer">
              <Plus className="w-8 h-8 text-muted-foreground" />
              <p className="text-muted-foreground">添加新设备</p>
            </div>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {availableDevices.map((device) => (
              <div key={device.id} className="bg-card rounded-lg p-6 shadow-lg">
                <div className="flex items-center gap-3 mb-4">
                  <device.icon className="w-8 h-8 text-primary" />
                  <h3 className="font-medium">{device.name}</h3>
                </div>
                <div className="space-y-2 mb-4">
                  {device.features.map((feature, index) => (
                    <div
                      key={index}
                      className="flex items-center gap-2 text-sm text-muted-foreground"
                    >
                      <AlertCircle className="w-4 h-4" />
                      <span>{feature}</span>
                    </div>
                  ))}
                </div>
                <div className="pt-4 border-t">
                  <button className="w-full py-2 text-sm text-primary hover:text-primary/80 transition-colors">
                    敬请期待
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* 功能说明 */}
        <div className="mt-12 bg-card rounded-lg p-8">
          <h2 className="text-xl font-bold mb-6">即将推出的功能</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="flex items-start gap-3">
              <Heart className="w-6 h-6 text-primary mt-1" />
              <div>
                <h3 className="font-medium mb-1">实时健康监测</h3>
                <p className="text-sm text-muted-foreground">
                  支持心率、血压、血氧等多项生理指标的实时监测
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Bed className="w-6 h-6 text-primary mt-1" />
              <div>
                <h3 className="font-medium mb-1">睡眠质量分析</h3>
                <p className="text-sm text-muted-foreground">
                  深度分析睡眠周期，提供个性化的改善建议
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <ThermometerSun className="w-6 h-6 text-primary mt-1" />
              <div>
                <h3 className="font-medium mb-1">体温异常预警</h3>
                <p className="text-sm text-muted-foreground">
                  实时监测体温变化，及时发现潜在健康问题
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Footprints className="w-6 h-6 text-primary mt-1" />
              <div>
                <h3 className="font-medium mb-1">运动数据追踪</h3>
                <p className="text-sm text-muted-foreground">
                  记录日常运动数据，科学指导运动强度
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Lock className="w-6 h-6 text-primary mt-1" />
              <div>
                <h3 className="font-medium mb-1">数据安全加密</h3>
                <p className="text-sm text-muted-foreground">
                  采用高级加密技术，保护您的健康数据安全
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Settings className="w-6 h-6 text-primary mt-1" />
              <div>
                <h3 className="font-medium mb-1">智能设备配置</h3>
                <p className="text-sm text-muted-foreground">
                  一键配置设备参数，轻松管理多个设备
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </AuthGuard>
  );
}
